---
sidebar_position: 3
title: Mocking
sidebar_label: Mocking
---

Mocking is a technique used to replace real API calls with controlled, fake responses during testing. This is crucial
for creating fast, reliable, and deterministic tests, as you don't have to rely on a real backend. With Hyper Fetch, you
can leverage your existing request definitions to create mocks easily.

:::secondary What you'll learn

1.  **Why mocking** is essential for robust testing.
2.  How to create **reusable mock handlers** based on your Hyper Fetch requests.
3.  How to write **tests using mocked** API responses.
4.  How to use **MSW (Mock Service Worker)** to intercept requests.

:::

---

## Why Mock?

When you're testing your application, you want to ensure that your components and logic work correctly without being
affected by external factors like network issues or backend changes. Mocking allows you to:

- **Isolate your frontend code**: Test your UI and business logic without needing a running backend.
- **Control test data**: Define the exact data your API calls should return, making it easy to test various scenarios
  (e.g., success, error, empty states).
- **Increase test speed**: Network requests are slow. Mocking them makes your tests run significantly faster.
- **Avoid rate limiting**: You won't hit real API rate limits during testing.

---

## Build-in Mock Handlers

You can create a mock handler for your requests. This function will take a Hyper Fetch request and a mock response.

```typescript
import { getUsers } from "src/api/users";

getUsers.setMock(() => ({ data: mockUsers }));

const response = await getUsers.send();

console.log(response); // { data: mockUsers }
```

---

## Using Mocks in Tests

Now, let's see how you can use this `setMock` method in your tests.

```tsx title="src/components/Users.test.tsx"
import { screen } from "@testing-library/react";
import { getUsers } from "src/api/users";
import { Users } from "./Users";

it("should render a list of users", async () => {
  // 1. Define the mock data
  const mockUsers = [
    { id: 1, name: "John Doe" },
    { id: 2, name: "Jane Doe" },
  ];

  // 2. Create and apply the mock handler
  // highlight-start
  getUsers.setMock(() => ({ data: mockUsers }));
  // highlight-end

  // 3. Render your component that's using HyperFetch to get the data
  render(<Users />);

  // 4. Assert that the component renders the mock data
  expect(await screen.findByText("John Doe")).toBeInTheDocument();
  expect(await screen.findByText("Jane Doe")).toBeInTheDocument();
});
```

By using Hyper Fetch you can create a powerful and maintainable testing setup where your mocks are always in sync with
your application code.

---

## Using MSW with Hyper Fetch

We recommend using [MSW (Mock Service Worker)](https://mswjs.io/) for mocking API requests. It's a powerful library that
intercepts requests on the network level, meaning your application doesn't even know it's not talking to a real server.

The best part is that you can use your existing Hyper Fetch requests to configure MSW, which keeps your mocks in sync
with your actual API definitions.

:::note Work in progress

We are working on the MSW integration docs.

:::

---

:::success Congratulations!

You've learned how to mock API requests in your Hyper Fetch application!

- You can explain the **benefits of mocking** for testing.
- You can set up **MSW** to work with your Hyper Fetch requests.
- You can create **type-safe mock handlers** that stay in sync with your API.
- You are able to write **isolated and reliable tests** for your components.

:::
